import styles from "./index.module.scss"
import { EyeOutlined, CommentOutlined, MoreOutlined } from '@ant-design/icons'
import { useSelector } from 'react-redux'
import { Col, Image, Popover, Popconfirm, message } from 'antd'
import { useNavigate } from "react-router-dom"
import { deleteOne } from "@/apis/admin/food"
import { useEffect, useState } from "react"
import { cancelCollect } from "@/apis/collect"
import { Local } from "@/utils/local"
import { getdiscuss } from "@/apis/discuss"
const base_url = import.meta.env.VITE_APP_URL
type Item = {
    Cover_img: string,
    review: number,
    texttual: string
    title: string
    _id: string
}
const User_Create = ({ keyIndex, type, item, Filtetdelete, Filtetdelete2 }: { keyIndex: number, type: boolean, item: Item, Filtetdelete: any, Filtetdelete2: any }) => {
    const thems = useSelector((state: any) => state.Appstore.theme)
    const [open, setOpen] = useState(false);
    const userid = Local.get_info()._id
    const [discusslength, setdiscusslength] = useState(0)
    const navigate = useNavigate()
    const toDetail = (id: String) => {
        navigate(`/detaile/${id}`)
    }
    const onConfirm = async () => {
        const result = await deleteOne(item._id)
        if (result.status == 200) {
            message.success("删除成功")
            setOpen(false)
            Filtetdelete(item._id)
        }
    }
    // cancelCollect
    const onConfirm2 = async () => {
        const res = await cancelCollect({ user_id: userid, food_id: item._id })
        if (res.status === 200) {
            setOpen(false)
            Filtetdelete2(item._id)
        }
    }

    const handleOpenChange = (newOpen: boolean) => {
        setOpen(newOpen);
    };

    const popos = (
        <div className={styles.operation}>

            {
                type ? <>
                    <p onClick={() => {
                        navigate('/editfood' + `?id=${item._id}`)
                    }}>编辑</p>
                    <Popconfirm onCancel={() => {
                        setOpen(false)


                    }} onConfirm={onConfirm} title="删除" okText="是" style={{ fontSize: '10px' }}
                        cancelText="否" >
                        <p>删除</p>
                    </Popconfirm></> : <>

                    <Popconfirm onCancel={() => {
                        setOpen(false)


                    }} onConfirm={onConfirm2} title="移除" okText="是" style={{ fontSize: '10px' }}
                        cancelText="否" >
                        <p>移除收藏</p>
                    </Popconfirm>
                </>
            }


        </div>
    )
    useEffect(() => {
        getdiscuss(item._id).then(res => {
            setdiscusslength(res.data.length)
        })
    }, [])
    return (
        <>
            {
                keyIndex % 2 === 0 ?
                    <Col xs={24} sm={24} md={24} lg={11}>
                        <div className={styles.User_Create_Item} style={{ background: thems ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.5)' }}>
                            <div className={styles.User_Create_Item_left}>
                                <Image
                                    preview={{
                                        mask:
                                            <div>点击预览</div>
                                    }}
                                    width={"100%"}
                                    height={'150px'}
                                    src={base_url + item.Cover_img}></Image>
                            </div>
                            <div onClick={() => toDetail(item._id)} style={{ padding: "5px" }} className={styles.User_Create_Item_right}>
                                <p style={{ textAlign: "center" }}>{item.title}</p>
                                <p className={styles.overline}>{item.texttual}</p>
                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                                    <div> <EyeOutlined />
                                        {item.review}</div>
                                    <div> <CommentOutlined />
                                        {discusslength}</div>
                                    <div onClick={(e) => {
                                        e.stopPropagation()
                                    }}>

                                        <Popover onOpenChange={handleOpenChange} open={open} content={popos} placement="bottom" trigger="click">
                                            <MoreOutlined />
                                        </Popover>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Col>
                    : <Col xs={24} sm={24} md={24} lg={11}>
                        <div onClick={() => toDetail(item._id)} className={styles.User_Create_Item} style={{ background: thems ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.5)' }}>
                            <div className={styles.User_Create_Item_right} style={{ padding: "5px" }}>
                                <p style={{ textAlign: "center" }}>{item.title}</p>
                                <p className={styles.overline}>{item.texttual}</p>
                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                                    <div> <EyeOutlined />
                                        {item.review}</div>
                                    <div> <CommentOutlined />
                                        {discusslength}</div>
                                    <div onClick={(e) => {
                                        e.stopPropagation()
                                    }}>

                                        <Popover onOpenChange={handleOpenChange} open={open} content={popos} placement="bottom" trigger="click">
                                            <MoreOutlined />
                                        </Popover>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.User_Create_Item_left}>
                                <Image
                                    preview={{
                                        mask:
                                            <div>点击预览</div>
                                    }}
                                    width={"100%"}
                                    height={'150px'}
                                    src={base_url + item.Cover_img}></Image>
                            </div>

                        </div>
                    </Col>
            }
        </>

    )
}

export default User_Create